<template>
  <section class="myForm">
    <el-dialog :title="title" :visible="dialogVisible" :before-close="handleClose">
      <div class="form-tip" v-text="tip"></div>
      <el-form :model="form" ref="validateFrom" autoComplete="on" label-width="100px">
        <el-form-item label="Topic">
          /a1pmsXDLAR5/device_hawk_demo/update
        </el-form-item>
        <el-form-item label="消息内容" prop="desc">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item label="Qos" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="0">0</el-radio>
            <el-radio label="1">1</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="dialog-footer">
          <el-button @click="dialogStatus = false">取 消</el-button>
          <el-button type="primary" @click.native.prevent="submitForm">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
  import { Vue, Component, Watch } from 'vue-property-decorator'

  @Component({
    props: {
      dialogVisible: { type: Boolean }, //表单是否显示
      title: { type: String }, //表单标题
      tip: { type: String }, //表单tip
      form: { type: Object } //表单提交对象
    }
  })
  export default class DeviceNewsTemplate extends Vue {
    data() {
      return {
        dialogStatus: this.dialogVisible //表单是否显示状态
      }
    }
    @Watch('dialogVisible')
    dialogVisibleChange(val) { //监听dialogVisible改变Status
      this.dialogStatus = val
    }
    @Watch('dialogStatus')
    dialogStatusChange(val) { //关闭的时候触发表单清空
      if (!val) {
        this.$refs.validateFrom.resetFields();
      }
      this.$emit('changeVisible', val)
    }
    handleClose(done) { //右上角关闭
      this.$confirm('确认关闭？')
        .then(_ => {
          this.dialogStatus = false
          done()
        })
        .catch(_ => {})
    }
    submitForm() { //回调父组件方法
      this.$refs.validateFrom.validate((valid) => {
        if (valid) {
          this.$emit('submitForm', this.$refs.validateFrom)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
</script>

<style lang="scss" scoped>
  @import '~@scss/theme/form.scss';
</style>
